<template>
  <!-- 经费认领项目筛选组件 -->
  <field linked
         label="项目信息"
         :text="selectorState.text"
         name="projectId"
         :value="selectorState.selectedProjectId"
         can-submit
         @click="selectorState.show = true"></field>
  <van-popup v-model:show="selectorState.show"
             position="bottom"
             round
             :style="{ height: '80%' }">
    <div class="van-picker__toolbar">
      <!-- <button type="button"
              class="van-picker__cancel">取消</button><button type="button"
              class="van-picker__confirm">确认</button> -->
      <list-search @load="loadData"></list-search>
    </div>
    <div class="columns">
      <div class="column">

        <ul>
          <li v-for="n in 14"
              :key="n">
            <ListCard title="张家水晶有限公司"
                      rightDescription="已提交"
                      linked
                      @click="selectProject()">
              <template #content>
                <div>
                  <van-icon name="user-o" />
                  测试项目
                </div>
                <div>XXYYYZZZZZ</div>
                <div>2020/12/12</div>
              </template>
            </ListCard>
          </li>
        </ul>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { reactive } from 'vue'
import ListSearch from '@/components/ListSearch.vue'
import ListCard from '@/components/ListCard.vue'
import Field from '@/components/Field.vue'
export default {
  components: {
    ListSearch,
    ListCard,
    Field
  },
  setup () {
    const selectorState = reactive({
      searchKey: '',
      selectedProjectId: '',
      projects: [],
      show: false,
      text: '请选择'
    })
    const selectProject = () => {
      // todo 修改为接口项目名称
      selectorState.text = '测试项目'
      selectorState.selectedProjectId = Math.random() + ''
      selectorState.show = false
    }
    // 加载搜索项数据
    const loadData = (searchKey) => {
      console.log('load' + searchKey)
    }
    return {
      ListSearch,
      selectorState,
      selectProject,
      loadData
    }
  }
}
</script>

<style scoped>
/* .columns {
  flex: 1;
  overflow: scroll;
} */
::v-deep(.van-search) {
  position: fixed;
  width: 100%;
  z-index: 9999;
}
</style>
